<template>
  <div class="main-box">
    <div v-if="this.$store.state.user.userIsPhone">
      <PageFoot :activeProps="active" />
    </div>
    <div v-else class="page-head">
      <PageHeader />
    </div>
    <div class="form-box">
      <div class="info-form-box">
        <div class="pro-entry-title">项目信息录入</div>
        <div class="head-box">
          <div class="identifier-box"></div>
          <div>项目基本信息</div>
        </div>
        <div class="basic-form-box">
          <div class="left-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>项目编号：
            </div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目编号"
                v-model="proCode"
              />
            </div>
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>项目名称：
            </div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目名称"
                v-model="proName"
              />
            </div>
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>项目简称：
            </div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目简称"
                v-model="proShortName"
              />
            </div>
          </div>
          <div class="middle-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>当前阶段：
            </div>
            <div class="info-box">
              <el-select v-model="stage" placeholder="请选择阶段">
                <el-option
                  v-for="item in stageOption"
                  :key="item.proStage"
                  :label="item.stageName"
                  :value="item.proStage"
                >
                </el-option>
              </el-select>
            </div>

            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>所在城市：
            </div>
            <div class="info-box">
              <el-cascader v-model="proCity" :options="cityList2"></el-cascader>
            </div>
          </div>
        </div>
        <div class="head-box">
          <div class="identifier-box"></div>
          <div>项目人员信息</div>
        </div>
        <div class="basic-form-box">
          <div class="left-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>销售负责人：
            </div>
            <div class="info-box">
              <el-select
                v-model="sale"
                filterable
                placeholder="请选择销售负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="lable-box">电气负责人：</div>
            <div class="info-box">
              <el-select
                v-model="electrical"
                filterable
                placeholder="请选择电气负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="right-box">
            <div class="lable-box">工程负责人：</div>
            <div class="info-box">
              <el-select
                v-model="engineering"
                filterable
                placeholder="请选择工程负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="lable-box">研发负责人：</div>
            <div class="info-box">
              <el-select
                v-model="research"
                filterable
                placeholder="请选择研发负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="head-box" style="height: 0; margin-top: 20px"></div>
        <div class="btn-box">
          <div class="remove-btn" @click="resetting">取消</div>
          <div class="sub-btn" @click="subPrjectData">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import PageFoot from '@/components/PageFoot.vue'
import cityList2 from '@/config/cityList2'

import { getEmpolyeeListApi, addProApi } from '@/api/index'
export default {
  computed: {
    cityList2 () {
      return cityList2
    }
  },
  components: {
    PageHeader,
    PageFoot
  },
  data () {
    return {
      proCode: '',
      proName: '',
      proShortName: '',
      // 阶段源数据
      stageOption: [
        {
          proStage: 'SalesResearch',
          stageName: '售前调研'
        },
        {
          proStage: 'Develop',
          stageName: '研发阶段'
        },
        {
          proStage: 'ElectricImplement',
          stageName: '电气实施'
        },
        {
          proStage: 'Design',
          stageName: '产品设计'
        },
        {
          proStage: 'DebugTogether',
          stageName: '联调阶段'
        },
        {
          proStage: 'Waiting4Sign',
          stageName: '等待验收'
        },
        {
          proStage: 'Finish',
          stageName: '已完成'
        }
      ],
      // 人员源数据
      stage: '',
      perOptions: [],
      value: '',
      // 销售负责人
      sale: this.$store.state.user.userCode,
      // 电气负责人
      electrical: '',
      // 工程负责人
      engineering: '',
      // 研发负责人
      research: '',
      // 合同负责人
      contract: '',
      // 城市数据源
      cityOption: [],
      // 所在城市
      proCity: [],
      // 日期
      date: '',
      // 合同金额
      amount: '',
      // 底部导航栏
      active: 2
    }
  },

  mounted () {
    this.getEmpolyeeList()
  },

  methods: {
    async getEmpolyeeList () {
      let res = await getEmpolyeeListApi()
      res.forEach((item, index) => {
        res[index].name = item.depname + '-' + item.empname
      })
      this.perOptions = [ ...res ]
    },

    // 提交表单
    async subPrjectData () {
      if (!this.proCode && !this.proName && !this.proShortName && !this.stage) {
        this.$message.warning('请填写必填项！！')
      }
      let data = {
        procode: this.proCode,
        proname: this.proName,
        proshortname: this.proShortName,
        prostage: this.stage,
        proprovince: this.proCity[0],
        procity: this.proCity[1],
        proaddress: '',
        projectmanager: this.engineering,
        electrical: this.electrical,
        salescommerce: this.sale,
        devleader: this.research
      }
      let res = await addProApi(data)
      console.log('提交表单------>', data, this.proCity)
      if (res === '添加项目成功') {
        this.$message.success('添加成功！！！')
        this.resetting()
        if (this.$store.state.user.userIsPhone) {
          this.$router.push('/MobileHomeView')
        } else {
          this.$router.push('/tablePage')
        }
      } else {
        this.$message.success(`${res}！！！`)
      }
    },

    // 重置
    resetting () {
      this.proCode = ''
      this.proName = ''
      this.proShortName = ''
      this.stage = ''
      this.sale = ''
      this.electrical = ''
      this.engineering = ''
      this.research = ''
      this.proCity = []
      this.contract = ''
      this.date = ''
      this.amount = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  text-align: center;
  background: #fff;
  .form-box {
    display: flex;
    width: 80%;
    height: 87vh;
    margin-left: 10%;

    /* border: 1px solid #dddcdc; */
    border-radius: 10px;
    .info-form-box {
      width: 100%;
      .pro-entry-title {
        height: 40px;

        /* border: 1px solid #dddcdc; */
        font-weight: bold;
        font-size: 24px;
        line-height: 40px;
      }
      .head-box {
        display: flex;
        align-items: center;
        height: 30px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
        font-size: 18px;
        line-height: 30px;
        text-align: start;
        border-bottom: 1px solid #dddcdc;
        .identifier-box {
          width: 5px;
          height: 10px;
          margin-right: 6px;
          background: #11a70c;
        }
      }
      .basic-form-box {
        /* border: 1px solid blue; */

        /* height: 30px; */
        display: flex;
        .left-box,
        .middle-box,
        .right-box {
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;

          /* height: 50px; */

          /* border: 1px solid red; */
          width: 33%;
          > div {
            /* border: 1px solid blue; */
            height: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 30px;
          }
          .lable-box {
            width: 30%;
            text-align: end;
          }
          .info-box {
            width: 65%;
            line-height: 25px;
            > input {
              width: 95%;
              height: 20px;
            }
          }
        }
        .left-box {
          /* margin: 0 6%; */
        }
      }
      .contract-form-box {
        /* border: 1px solid red; */
        display: flex;
        .left-box,
        .middle-box,
        .right-box {
          display: flex;
          flex-wrap: wrap;

          /* height: 50px; */

          /* border: 1px solid red; */
          width: 46%;
          > div {
            /* border: 1px solid blue; */
            height: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 30px;
          }
          .lable-box {
            width: 35%;
            text-align: end;
          }
          .info-box {
            width: 60%;
            line-height: 25px;
            > input {
              width: 95%;
              height: 20px;
            }
          }
        }
        .left-box {
          /* margin: 0 6%; */
        }
      }
      .annex-box {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid red;
        .pro-item-box {
          display: flex;
          width: 32%;
          height: 30px;
          .pro-id {
            width: 30px;
            height: 30px;

            /* border: 1px solid red; */
            line-height: 30px;
          }
          .pro-name-box {
            width: 75%;

            /* border: 1px solid red; */
            height: 30px;
            line-height: 30px;
            text-align: start;
          }
          .update-btn-box {
            margin-right: 8px;
            color: #2b8633;
          }
          .del-btn-box {
            color: #d11b1b;
            font-size: 12px;
          }
          .update-btn-box,
          .del-btn-box {
            width: 10%;

            /* border: 1px solid red; */
            height: 30px;
            line-height: 30px;
          }
          .update-btn-box,
          .del-btn-box:hover {
            cursor: pointer;
          }
        }
      }
      .upload-demo {
        /* border: 1px solid red; */
        width: 100%;
        text-align: start;
        .upload-btn {
          color: #000;
          background: rgba($color: #000, $alpha: 0%);
          border: none;
        }
        > ul {
          /* border: 1px solid blue; */

          /* display: flex;
          flex-wrap: wrap;
          max-height: 50px;
          overflow: auto; */

          /* > li {
            margin: 0 5px;
            border: 1px solid green;
            width: 32%;
          } */
        }
        > ul::-webkit-scrollbar {
          width: 4px;
          height: 8px;
        }
        > ul::-webkit-scrollbar-thumb {
          background: fade(rgb(78 182 214), 60%);
          border-radius: 10px;
          box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
          opacity: 0.2;
        }
        > ul::-webkit-scrollbar-track {
          background: fade(rgb(78 182 214), 30%);
          border-radius: 0;
          box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
        }
      }
      .milestone-form-box {
        justify-content: space-between;
        overflow-x: scroll; //设置横向滚动
        overflow-y: hidden; //禁止纵向滚动
        overflow-y: auto;
        white-space: nowrap; //段落中文本不换行
        text-align: justify; //文字平铺
        border: 1px solid rgb(195 195 199);
        .stage-title-box {
          /* width: 1000px; */
          display: flex;
          > div {
            flex-grow: 0; //禁止自动增长
            flex-shrink: 0; //禁止自动缩小
            width: 30%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-right: 1px solid rgb(223 218 218);
            border-bottom: 1px solid rgb(223 218 218);
          }
        }
        .stage-body-box {
          /* width: 1000px; */
          display: flex;
          > div {
            flex-grow: 0; //禁止自动增长
            flex-shrink: 0; //禁止自动缩小
            width: 30%;
            height: 60px;
            line-height: 20px;
            text-align: center;
            border-right: 1px solid rgb(223 218 218);
            > div {
              display: flex;
              width: 100%;
              .item-title,
              .item-time {
                /* border: 1px solid green; */
                width: 49%;
                height: 20px;
              }
            }
          }
        }
      }
      .milestone-form-box::-webkit-scrollbar {
        width: 4px;
        height: 8px;
      }
      .milestone-form-box::-webkit-scrollbar-thumb {
        background: fade(rgb(78 182 214), 60%);
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
        opacity: 0.2;
      }
      .milestone-form-box::-webkit-scrollbar-track {
        background: fade(rgb(78 182 214), 30%);
        border-radius: 0;
        box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
      }
      .btn-box {
        /* border: 1px solid red; */
        display: flex;
        justify-content: center;
        width: 100%;
        > div {
          /* border: 1px solid green; */
          width: 10%;
          height: 30px;
          margin: 20px;
          font-size: 20px;
          line-height: 30px;
          text-align: center;
          border-radius: 5px;
        }
        .sub-btn {
          color: #fff;
          background: #378ac2;
        }
        .remove-btn {
          color: #fff;
          background: #bfc2c2;
        }
        .sub-btn:hover {
          background: rgba($color: #3075a3, $alpha: 70%);
          cursor: pointer;
        }
        .remove-btn:hover {
          background: rgba($color: #000, $alpha: 50%);
          cursor: pointer;
        }
      }
      .sub-btn-box {
        width: 100px;
        height: 32px;
        margin: 8% 0 0 86%;
        font-size: 20px;
        line-height: 30px;
        border: 1px solid #c7c4c4;
      }
      .sub-btn-box:hover {
        background: rgba($color: #f5f0f0, $alpha: 50%);
        cursor: pointer;
      }
    }
  }
}

@media screen and (width <= 768px) {
  .main-box {
    text-align: center;
    background: #fff;
    .form-box {
      display: flex;
      width: 90%;
      height: 90vh;
      margin-left: 5%;
      overflow: auto;

      /* border: 1px solid red; */
      border-radius: 10px;
      .info-form-box {
        width: 100%;
        .pro-entry-title {
          height: 40px;

          /* border: 1px solid #dddcdc; */
          font-weight: bold;
          font-size: 24px;
          line-height: 40px;
        }
        .head-box {
          display: flex;
          align-items: center;
          height: 30px;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-left: 20px;
          font-size: 18px;
          line-height: 30px;
          text-align: start;
          border-bottom: 1px solid #dddcdc;
          .identifier-box {
            width: 5px;
            height: 10px;
            margin-right: 6px;
            background: #11a70c;
          }
        }
        .basic-form-box {
          /* border: 1px solid blue; */

          /* height: 30px; */
          display: flex;
          flex-wrap: wrap;
          .left-box,
          .middle-box,
          .right-box {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;

            /* height: 50px; */

            /* border: 1px solid red; */
            width: 100%;
            > div {
              /* border: 1px solid blue; */
              height: 30px;
              margin-top: 10px;
              margin-bottom: 10px;
              line-height: 30px;
            }
            .lable-box {
              /* border: 1px solid red; */
              width: 36%;
            }
            .info-box {
              width: 63%;
              line-height: 25px;
              > input {
                width: 87%;
                height: 30px;
                margin-left: 2px;
                padding-left: 16px;
                color: #dcdfe6;
                font-size: 13px;
                border: 1px solid #dcdfe6;
                border-radius: 5px;
              }
            }
          }
        }
        .contract-form-box {
          /* border: 1px solid red; */
          display: flex;
          .left-box,
          .middle-box,
          .right-box {
            display: flex;
            flex-wrap: wrap;

            /* height: 50px; */

            /* border: 1px solid red; */
            width: 46%;
            > div {
              /* border: 1px solid blue; */
              height: 30px;
              margin-top: 10px;
              margin-bottom: 10px;
              line-height: 30px;
            }
            .lable-box {
              width: 35%;
              text-align: end;
            }
            .info-box {
              width: 60%;
              line-height: 25px;
              > input {
                width: 95%;
                height: 20px;
              }
            }
          }
          .left-box {
            /* margin: 0 6%; */
          }
          .middle-box {
            .lable-box {
              .lable-box {
                width: 34%;
                border: 1px solid red;
              }
            }
          }
        }
        .annex-box {
          display: flex;
          flex-wrap: wrap;
          border: 1px solid red;
          .pro-item-box {
            display: flex;
            width: 32%;
            height: 30px;
            .pro-id {
              width: 30px;
              height: 30px;

              /* border: 1px solid red; */
              line-height: 30px;
            }
            .pro-name-box {
              width: 75%;

              /* border: 1px solid red; */
              height: 30px;
              line-height: 30px;
              text-align: start;
            }
            .update-btn-box {
              margin-right: 8px;
              color: #2b8633;
            }
            .del-btn-box {
              color: #d11b1b;
              font-size: 12px;
            }
            .update-btn-box,
            .del-btn-box {
              width: 10%;

              /* border: 1px solid red; */
              height: 30px;
              line-height: 30px;
            }
            .update-btn-box,
            .del-btn-box:hover {
              cursor: pointer;
            }
          }
        }
        .upload-demo {
          /* border: 1px solid red; */
          width: 100%;
          text-align: start;
          .upload-btn {
            color: #000;
            background: rgba($color: #000, $alpha: 0%);
            border: none;
          }
          > ul {
            /* border: 1px solid blue; */

            /* display: flex;
          flex-wrap: wrap;
          max-height: 50px;
          overflow: auto; */

            /* > li {
            margin: 0 5px;
            border: 1px solid green;
            width: 32%;
          } */
          }
          > ul::-webkit-scrollbar {
            width: 4px;
            height: 8px;
          }
          > ul::-webkit-scrollbar-thumb {
            background: fade(rgb(78 182 214), 60%);
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
            opacity: 0.2;
          }
          > ul::-webkit-scrollbar-track {
            background: fade(rgb(78 182 214), 30%);
            border-radius: 0;
            box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
          }
        }
        .milestone-form-box {
          justify-content: space-between;
          overflow-x: scroll; //设置横向滚动
          overflow-y: hidden; //禁止纵向滚动
          overflow-y: auto;
          white-space: nowrap; //段落中文本不换行
          text-align: justify; //文字平铺
          border: 1px solid rgb(195 195 199);
          .stage-title-box {
            /* width: 1000px; */
            display: flex;
            > div {
              flex-grow: 0; //禁止自动增长
              flex-shrink: 0; //禁止自动缩小
              width: 30%;
              height: 20px;
              line-height: 20px;
              text-align: center;
              border-right: 1px solid rgb(223 218 218);
              border-bottom: 1px solid rgb(223 218 218);
            }
          }
          .stage-body-box {
            /* width: 1000px; */
            display: flex;
            > div {
              flex-grow: 0; //禁止自动增长
              flex-shrink: 0; //禁止自动缩小
              width: 30%;
              height: 60px;
              line-height: 20px;
              text-align: center;
              border-right: 1px solid rgb(223 218 218);
              > div {
                display: flex;
                width: 100%;
                .item-title,
                .item-time {
                  /* border: 1px solid green; */
                  width: 49%;
                  height: 20px;
                }
              }
            }
          }
        }
        .milestone-form-box::-webkit-scrollbar {
          width: 4px;
          height: 8px;
        }
        .milestone-form-box::-webkit-scrollbar-thumb {
          background: fade(rgb(78 182 214), 60%);
          border-radius: 10px;
          box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
          opacity: 0.2;
        }
        .milestone-form-box::-webkit-scrollbar-track {
          background: fade(rgb(78 182 214), 30%);
          border-radius: 0;
          box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
        }
        .btn-box {
          /* border: 1px solid red; */
          display: flex;
          justify-content: center;
          width: 100%;
          > div {
            /* border: 1px solid green; */
            width: 3.875rem;
            height: 32px;
            margin: 20px;
            font-size: 12px;
            line-height: 32px;
            text-align: center;
            border-radius: 5px;
          }
          .sub-btn {
            color: #fff;
            background: #67c23a;
          }
          .sub-btn:hover {
            color: #fff;
            background: #85ce61;
            border-color: #85ce61;
            cursor: pointer;
          }
          .remove-btn {
            color: #000;
            background: rgba($color: #000, $alpha: 0%);
            border: 1px solid #dcdfe6;
          }
          .remove-btn:hover {
            color: #409eff;
            background-color: #ecf5ff;
            border-color: #c6e2ff;
            cursor: pointer;
          }
        }
        .sub-btn-box {
          width: 100px;
          height: 32px;
          margin: 8% 0 0 86%;
          font-size: 20px;
          line-height: 30px;
          border: 1px solid #c7c4c4;
        }
        .sub-btn-box:hover {
          background: rgba($color: #f5f0f0, $alpha: 50%);
          cursor: pointer;
        }
      }
    }
  }
}
</style>